<!--登录-->

<template>
  <div class="login_container">
    <!-- dialogFormVisiable控制对话框的显示与隐藏,title对话框标题 -->
    <el-dialog v-model="userStore.visible" ref="dialog" @close="close" title="用户登录">
      <!-- 对话框身体部分 -->
      <el-row>
        <!-- 左侧结构: 收集登录号码/微信扫一扫 -->
        <el-col :span="12">
          <div class="login">
            <div v-show="scene==0">
              <el-form :model="loginParam" :rules="rule" ref="form" >
                <el-form-item prop="phone" >
                  <el-input :prefix-icon="User" placeholder="请输入手机号" v-model="loginParam.phone" ></el-input>
                </el-form-item>
                <el-form-item prop="code" >
                  <el-input :prefix-icon="Lock" placeholder="请输入验证码" v-model="loginParam.code" ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button :disabled="!isPhone||flag?true:false"  >
                    <CapCoun v-if="flag" :flag="flag" v-on:getFlag="getFlag"/>
                    <span v-else @click="getCode" >获取验证码</span>
                  </el-button>
                </el-form-item>
              </el-form>
              <el-button style="width: 100%"
                         type="primary"
                         size="default"
                         :disabled="!isPhone || loginParam.code.length<6 || loginParam.code.length>6 ? true:false"
                         @click="login"
              >用户登录</el-button>
              <div class="bottom"  >
                  <p @click="changeScene" >微信扫码登录</p>
                  <svg @click="changeScene" t="1695221334657" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13783" width="32" height="32"><path d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z" fill="#28C445" p-id="13784"></path><path d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z" fill="#28C445" p-id="13785"></path></svg>
              </div>
            </div>
            <div class="webchat" v-show="scene==1">
              <!--微信扫码登录页面容器-->
              <div id="login_container"></div>
              <div class="phone_code_login" @click="phoneCodeLogin_changeScene" >
                <p>手机验证码登录</p>
                <svg t="1696864731923" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6061" width="32" height="32"><path d="M151.893333 538.437818c0 229.143273 184.785455 414.906182 412.780606 414.906182C792.638061 953.344 977.454545 767.581091 977.454545 538.437818c0-229.158788-184.816485-414.906182-412.780606-414.906182-227.979636 0-412.796121 185.747394-412.796121 414.906182z" fill="#A5EFFA" p-id="6062"></path><path d="M555.892364 247.202909v-35.29697c0-38.989576-31.449212-70.593939-70.221576-70.593939H134.547394c-38.787879 0-70.221576 31.604364-70.221576 70.593939v35.29697h491.566546z" fill="#BDE6FF" p-id="6063"></path><path d="M573.44 264.843636H46.762667v-52.937697c0-48.717576 39.299879-88.234667 87.784727-88.234666h351.107879c48.484848 0 87.784727 39.501576 87.784727 88.234666v52.937697zM81.656242 229.546667h456.67297v-17.640728a52.875636 52.875636 0 0 0-52.658424-52.937697H134.547394a52.875636 52.875636 0 0 0-52.673939 52.937697l-0.217213 17.640728z" fill="#0F48E1" p-id="6064"></path><path d="M64.108606 865.109333v70.59394c0 33.745455 36.569212 70.578424 70.221576 70.578424h351.107879c33.590303 0 70.299152-36.770909 70.237091-70.593939V865.124848H64.108606z" fill="#BDE6FF" p-id="6065"></path><path d="M485.670788 1024H134.547394C91.027394 1024 46.762667 979.440485 46.762667 935.765333v-88.234666H573.44v88.234666c-3.661576 47.119515-40.897939 84.557576-87.769212 88.234667z m-404.014546-141.249939v52.937697c0 23.753697 29.261576 52.953212 52.67394 52.953212h351.107879c23.629576 0 52.673939-29.416727 52.673939-52.953212v-52.937697H81.656242z" fill="#0F48E1" p-id="6066"></path><path d="M64.108606 247.202909h491.783758v617.906424H64.108606z" fill="#FFFFFF" p-id="6067"></path><path d="M573.44 882.750061H46.545455v-653.187879h526.894545v123.500606h-35.110788V264.843636H81.656242v582.547394l456.67297 0.077576v-370.812121h35.110788v406.093576z m-298.589091 35.296969h87.846788v35.29697h-87.846788V918.031515z" fill="#0F48E1" p-id="6068"></path><path d="M854.481455 70.656v283.368727c0 13.808485-5.445818 27.058424-15.158303 36.817455a51.665455 51.665455 0 0 1-36.615758 15.235879H518.640485l-107.023515 136.471272a17.501091 17.501091 0 0 1-19.580122 5.787152 17.640727 17.640727 0 0 1-11.791515-16.756364v-125.50206h-34.831515a53.310061 53.310061 0 0 1-52.953212-53.21697V70.640485a53.077333 53.077333 0 0 1 15.406546-37.484606 52.534303 52.534303 0 0 1 37.267393-15.515152H801.82303c13.979152 0 27.384242 5.585455 37.267394 15.515152 9.883152 9.945212 15.422061 23.427879 15.391031 37.484606z" fill="#FFFFFF" p-id="6069"></path><path d="M398.025697 567.032242c-3.971879 0-7.928242-0.667152-11.698424-1.985939a34.909091 34.909091 0 0 1-23.629576-33.373091V423.718788h-17.268364c-38.94303-0.077576-70.469818-31.806061-70.516363-70.950788V70.656C274.959515 31.681939 306.362182 0.077576 345.150061 0H801.82303c38.787879 0.077576 70.17503 31.681939 70.221576 70.656v283.368727c-0.046545 38.477576-31.061333 69.66303-69.352727 69.709576H527.065212l-101.608727 129.768727a34.614303 34.614303 0 0 1-27.430788 13.529212zM345.150061 35.29697a35.281455 35.281455 0 0 0-35.110788 35.281454v282.205091a35.576242 35.576242 0 0 0 35.39006 35.576243h52.379152v143.313454l112.221091-143.235879h292.600242a34.133333 34.133333 0 0 0 24.203637-10.084848c6.423273-6.438788 10.022788-15.204848 10.022787-24.327758V70.656a35.281455 35.281455 0 0 0-35.110787-35.29697l-456.61091-0.06206z" fill="#0F48E1" p-id="6070"></path><path d="M485.670788 194.187636h35.110788v35.281455h-35.110788v-35.281455z m70.221576 0h35.110788v35.281455h-35.110788v-35.281455z m70.283636 0h35.126303v35.281455H626.191515v-35.281455z" fill="#2A5082" p-id="6071"></path></svg>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="letContent">
            <div class="top">
              <div class="item">
                <img src="@/assets/images/code_app.png" alt="图片加载失败">
                <svg t="1695222258900" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20051" width="20" height="20"><path d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z" fill="#28C445" p-id="20052"></path><path d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z" fill="#28C445" p-id="20053"></path></svg>
                <p>扫一扫关注</p>
                <p>快速预约挂号</p>
              </div>
              <div class="item">
                <img src="@/assets/images/code_login_wechat.png" alt="图片加载失败">
                <svg t="1695222209747" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15446" width="20" height="20"><path d="M551.424 0H176.128c-47.104 0-85.504 38.4-85.504 85.504v852.992c0 47.104 38.4 85.504 85.504 85.504h375.296c47.104 0 85.504-38.4 85.504-85.504V85.504c0-47.104-38.4-85.504-85.504-85.504M312.832 68.096h102.4c9.216 0 16.896 7.68 16.896 16.896s-7.68 16.896-16.896 16.896h-102.4c-9.216 0-16.896-7.68-16.896-16.896-0.512-9.216 7.168-16.896 16.896-16.896m51.2 921.6c-28.16 0-51.2-23.04-51.2-51.2s23.04-51.2 51.2-51.2 51.2 23.04 51.2 51.2-23.04 51.2-51.2 51.2m238.592-136.704H124.928V170.496h477.696v682.496z" fill="#FFA28D" p-id="15447"></path><path d="M853.504 66.56h-218.112c1.536 6.144 2.048 12.288 2.048 18.432v45.056h88.576c8.704 0 15.872 7.168 15.872 15.872s-7.168 15.872-15.872 15.872h-88.576v64H901.12v637.952h-264.192v54.784c8.192-13.824 23.552-23.04 40.448-23.04 26.624 0 47.616 21.504 47.616 47.616 0 26.624-21.504 47.616-47.616 47.616-19.968 0-36.864-12.288-44.032-29.696-10.24 35.328-43.008 61.44-81.92 61.44h301.568c44.032 0 79.872-35.84 79.872-79.872V146.432c0.512-44.032-35.84-79.872-79.36-79.872z" fill="#5FFFBA" p-id="15448"></path></svg>
                <p>扫一扫下载</p>
                <p>预约挂号APP</p>
              </div>
            </div>
<!--            <p class="tip">YangMufa官方指定平台</p>-->
            <p class="tip">快速挂号 安全放心</p>
            <p class="tip">www.trainees.cn</p>
          </div>
        </el-col>
      </el-row>
      <template v-slot:footer>
        <el-button type="primary" size="default" @click="closeDialog" >关闭窗口</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {computed, reactive, ref, watch} from "vue";
//获取user仓库的数据 (visiable) 可用于控制login组件的对话框显示与隐藏
import useUserStore from "@/store/modules/user.ts";
import {User,Lock} from "@element-plus/icons-vue";

//倒计时组件
import CapCoun from "@/components/captchaCountdown/index.vue"
import {ElMessage} from "element-plus";

//微信扫码登录参数请求
import {reqWxLogin} from "@/api/hospital/index.ts";
import {WXLoginResponseData} from "@/api/hospital/type.ts";
import {useRoute, useRouter} from "vue-router";

let userStore = useUserStore();

let $router = useRouter();
let $route = useRoute();

// 0即手机验证码登录,1即微信扫码登录
let scene = ref<number>(0);
// 获取form组件实例
let form = ref<any>();
//收集表单-手机号数据
let loginParam = reactive({
  phone:"",//收集手机号码
  code:"",//收集验证码
})
//控制倒计时组件的显示与集货藏
let flag = ref<boolean>(false); //true开启倒计时状态

// 弹窗: 点击 微信扫码登录 / 微信小图标 切换到微信扫码登录界面
const changeScene = async () => {
  // 切换为场景1
  scene.value = 1;
  // 发请求获(尚硅谷服务器)取微信二维码需要的参数(需要携带一个参数方便告诉服务器用户授权成功后重定向到某个页面),
  let redirect_URL = encodeURIComponent(window.location.origin + "/wxlogin");
  // 编码前 http://127.0.0.1:856/wxlogin
  // console.log("编码后",redirect_URL);
  // http%3A%2F%2F127.0.0.1%3A856%2Fwxlogin,后端需要编码过的url
  // console.log("编码前",window.location.origin + "/wxlogin");
  let result: WXLoginResponseData = await reqWxLogin(redirect_URL);
  // 生成微信扫码登录二维码的页面
  // @ts-ignore // 忽略提示
  console.log("result.data.state:",result.data.state);
  new WxLogin({
    self_redirect: true, //true:手机点击确认登录后可以在 iframe 内跳转到 redirecturi
    id: "login_container", //显示二维码容器设置,
    appid: result.data.appid, // 应用位置标识
    scope: "snsapi_login", //当前微信扫码登录页面已经授权了
    redirect_uri: result.data.redirectUri, //填写授权回调域路径,就是用户授权成功以后，微信服务器向公司后台推送code地址
    state: result.data.state, //state就是学校服务器重定向的地址携带用户信息
    style: "black",
    href: "",
  });
};
// 手机短信验证码登录页面 点击回调
const phoneCodeLogin_changeScene = () => {
  // 返回微信扫码登录
  scene.value = 0;
}
// 获取验证码按钮的回调
const getCode = async () => {
  // 如果按钮当前为禁用状态,结束次函数后续请求
  if (!isPhone.value || flag.value) {
    return;
  }
  // 开启倒计时(倒计时组件显示出来)
  flag.value = true;
  //通知Pinia仓库库存储验证码
  try {
    // 获取验证码成功
    await userStore.getCode(loginParam.phone);
    loginParam.code = userStore.code;
  } catch (error){
    // 获取验证码失败
    ElMessage({
      type:"error",
      message: (error as Error).message,

    })
  }
};
//计算收集的手机号码格式是否正确
let isPhone = computed(()=>{
  //手机号正则表达式
  const reg =  /^1[3456789]\d{9}$/;
  // 返回treue 是手机号码.反之不是
  return reg.test(loginParam.phone)
});
// 计算器子组件绑定的事件,当倒计时结束时由子组件调用该方法并传递值
const getFlag = (value: boolean) => {
  flag.value = value;
};

//登录
const login = async () => {
  //保证表单验证都符号条件
  await form.value.validate(); // 不通过后面的语句不执行
  //登录请求成功:顶部组件展示用户名字/登录对话框关闭
  //登录请求失败:弹出登录失败提示框
  try {
    //用户登录成功
    await userStore.userLogin(loginParam);
    // 关闭对话框
    userStore.visible = false;
    //获取url参数
    let redirect = $route.query.redirect;
    if (redirect) {
      await $router.push(redirect.toString());
    } else {
      await $router.push("/home");
    }
  } catch (error) {
    //登录失败
    ElMessage({
      type:"error",
      message: (error as Error).message,
    });
  }
};
// 监听场景的数值
watch(()=>scene.value,(value:number)=>{
  if (value === 1) {
    userStore.queryState();
  }
});

//自定义手机号码合规性校验规则
const validatorPhone = (rule:any,value:any,callBack:any) => {
  console.log(value)
  const reg =  /^1[3456789]\d{9}$/;
  if (reg.test(value)) {
    callBack();//输入正确
  } else {
    callBack(new Error("您输入的不是手机号!"));
  }
}
//自定义验证码校验规则
const validatorCode = (rule:any,value:any,callBack:any) => {
  const reg =  /^\d{6}$/;
  if (reg.test(value)) {
    callBack();//输入正确
  } else {
    callBack(new Error("请输入正确的6位验证码!"));
  }
}
// form表单校验规则配置对象
const rule = {
  phone:[
    {
      trigger:"change", //触发的时机
      validator:validatorPhone,//校验规则
    },
  ],
  code:[
    {
      trigger:"change", //触发的时机
      validator:validatorCode,//校验规则
    },
  ],
};


//关闭窗口按钮的回调
const closeDialog = () => {
  userStore.visible = false;
};





</script>

<script lang="ts">
export default {
  name:"Login",
}
</script>

<style scoped lang="scss">

.login_container {
  :deep(.el-dialog__body) {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
  .login {
    padding: 20px;
    border: 1px solid #ccc;
    .bottom {
      width: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      p {
        margin: 10px 0px;
      }
    }
    .webchat {
      #login_container{
        display: flex;
        //justify-content: center;
        flex-direction: column;
        align-items: center;
      }
      .phone_code_login {
        display: flex;
        flex-direction: column;
        align-items: center;
        p {
          margin: 10px 0px;
        }

      }
    }
  }

  .letContent {

    .top {
      display: flex;
      justify-content: space-around;
      padding: 0 25px;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 130px;
          height: 130px;
        }
        p {
          margin: 10px 0px;
        }

      }
    }
    .tip {
      text-align: center;
      margin: 6px 0px;
      font-size: 15px;
      font-weight: 500;
    }
  }
}
</style>